
<!DOCTYPE HTML>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
		<meta charset="utf-8"/>
		<!-- prevent cache -->
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="pragma" content="no-cache">
		
		<title>TweetView</title>
		
		<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />
		<script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/TMap/TMap.js"></script>
		<script type='text/javascript' src='http://betadesktop.tapnmap.ru/js/jquery/js/jquery-1.7.1.min.js'         ></script>
        <script type='text/javascript' src='http://betadesktop.tapnmap.ru/js/jquery/js/jquery.mousewheel.min.js'    ></script>
		<script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/API/TPlanEngine.js"></script>
		<script type="text/javascript" src="http://betadesktop.tapnmap.ru/js/API/TToolTip.js"></script>
		<style>
		/* iOS styles */

		/* vertically center the image */
		.tweetviewRefresh {
			float:right;
		}		
		.tweetviewRefresh img	{
			margin-top:6px;
		}
		/* tweetview pane */
		.mblScrollableViewContainer {
			padding-bottom:40px !important;
		}
		.tweetviewList {
			
		}		
		.tweetviewHidden {
			display:none;
		}
		.tweetviewList li {
			min-height:55px;
			padding-top:8px;
		}
		.tweetviewListItem { /* special formatting to allow 2 lines of content */
			line-height:18px;
			height:auto;
		}
		/* user's avatar */
		.tweetviewAvatar {
			float:left;
			padding-right:5pt;
		}		/* content wrapper for tweets */
		.tweetviewContent {
			padding-left:60px;
		}
		/* username formatting */
		.tweetviewUser {
			font-size:80%;
		}
		/* actual tweet text formatting */
		.tweetviewText {
			font-size:70%;
			font-weight:normal;
			padding-right:50px;
			padding-bottom:10px;
		}
		.android .tweetviewText {
			font-size:50%;
		}

		/* tweet time */
		.tweetviewTime {
			float:right;
			color:#777;
			font-size:65%;
			font-weight:normal;
			padding-right:10px;
		}
		/* clears floats at the end of the list item */
		.tweetviewClear {
			clear:both;
		}
		.tweetviewSwitch {
			right:10px;
			top:10px;
			float:right;
		}
		.tweetviewHidden {
			display:none;
		}
		.tweetviewTabBar {
			margin-top:-49px;
		}

		/* Android styles */

		.android .tweetviewRefresh img {
		    margin-top: 3px;
		}
		.android .mblRoundRectList {
		    background-color: #000;
		    border: none;
		}
		.android .tweetviewTime {
		    color: #FFF;
		}
		.android .mblTabBarButtonTextBox {
		    color: #FFF;
		}
		.android .mblTabBar .mblTabButtonSelected {
		    background-color: transparent;
		    border-radius: 0;
		}
		.android .mblColorDefaultSet {
		    background: #FFC700;
		} 
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
	</head>
	<body>
		
				<!-- the refresh button -->
				<!-- icon="images/refresh.png" class="mblDomButton tweetviewRefresh"-->
				<!-- <div dojoType="dojox.mobile.ToolBarButton"  style="float:right;" >refresh</div> -->
				
			
		<!-- list of malls -->
		<div id="mallList" dojoType="dojox.mobile.ScrollableView" selected="true">
			<h1 dojoType="dojox.mobile.Heading" fixed="top">Торговые центры</h1>	
			<ul dojoType="dojox.mobile.RoundRectList">
				<li dojoType="dojox.mobile.ListItem" class="mblListItem tweetviewListItem" style="padding: 5px !important" moveto="mallDetails" onclick='showDetailsView()'>
					
					<img class="tweetviewAvatar" src="./mega.jpg"/ style="width: 48pt; height: 48p">
					<div class="tweetviewContent">
						<div class="tweetviewUser"><br>Mega Нижний Новгород</div>
						<div class="tweetviewText">Федяково, кстовский район</div>
						<div class="tweetviewClear"></div>
					</div>
				</li>

			</ul>
		</div>

		<div id="mallDetails" dojoType="dojox.mobile.View">
			<div id='1' dojoType="dojox.mobile.ScrollableView" selected="true">
				<h1 dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="#mallList" fixed="top">
					Мега Нижний Новгород
				</h1>
				<div dojoType="dojox.mobile.RoundRectList">
					<div class="mblVariableHeight" dojoType="dojox.mobile.ListItem">
						<img src="./mega.jpg" style="width: 100%;"/>
						МЕГА создает самую комфортную атмосферу для шопинга. К услугам автолюбителей – большая парковка, являющаяся одним из основных требований к современному торговому центру. Для тех, кто пользуется общественным транспортом, курсируют МЕГА автобусы. В наших светлых и просторных торговых центрах всегда найдется уютное место, где можно спокойно отдохнуть в перерывах между покупками. Помимо магазинов на территории комплекса находятся многочисленные кафе и рестораны на любой вкус, где можно выпить кофе в компании друзей или пообедать всей семьей. Создание семейной атмосферы является одной из наших приоритетных задач. Для удобства самых маленьких посетителей и их родителей предусмотрены специальные комнаты по уходу за ребенком. Функционируют пункты первой
						медицинской помощи.
					</div>
				</div>
			</div>
			<div id='2' dojoType="dojox.mobile.View" selected="false">
				<h1 id='city_map_header' dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="#mallList" fixed="top">
					Cхема проезда
				</h1>
				<!--div id='city_map' dojoType="dojox.mobile.View"-->
					<div id='google_map' style='width: 100% !important; height: 100% !important; position: relative !important; display: block !important;'>
					</div>
				<!--/div-->
			</div>
			<div id='3' dojoType="dojox.mobile.View" selected="false">
				<h1 dojoType="dojox.mobile.Heading" back="Список ТЦ" moveTo="#mallList" fixed="top">
					План здания
				</h1>
				<div id='buildingplan_area' style='width: 100% !important; height: 100% !important; position: relative !important; display: block !important;'>
				</div>
			</div>

			<ul dojoType="dojox.mobile.TabBar" id='tabs' fixed="bottom">
				<li dojoType="dojox.mobile.TabBarButton"  moveTo="1" selected="true" onclick='onTab1Click();'>О торговом центре</li>
				<li dojoType="dojox.mobile.TabBarButton"  moveTo="2" selected="false" onclick='onTab2Click();'>Как проехать</li>
				<li dojoType="dojox.mobile.TabBarButton"  moveTo="3" selected="false" onclick='onTab3Click();'>Что внутри</li>
			</ul>

		</div>
	</body>
		<script type="text/javascript">
			dojo.require("dojox.mobile.parser");
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.ScrollableView");
			dojo.require("dojox.mobile.TabBar");
			dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");
			var actualTab = 1;
			dojo.ready(function() {
				// Parse the page!
				dojox.mobile.parser.parse();
				document.getElementById('google_map').setAttribute('style', 'height: '+ (window.innerHeight - document.getElementById('city_map_header').offsetHeight - document.getElementById('tabs').offsetHeight) +'px !important;');
				document.getElementById('buildingplan_area').setAttribute('style', 'height: '+ (window.innerHeight - document.getElementById('city_map_header').offsetHeight - document.getElementById('tabs').offsetHeight) +'px !important;');
				var tpe = null;
			});
			function loadMap(){
				var map = MapEngines.Google();
				map.initMap(
					'google_map', 
					MapTypes.ROADMAP, 
					new Coords(56.3, 44), 
					11
				);
			    map.addPlaceMark(new PlaceMark(new Coords(56.2254, 44.0714), 'ТРЦ Мега', null));
			};
			function loadPlan(){
				$('#buildingplan_area').html('<div id="building_plan"/>');
				var plan = $('#building_plan');
				plan.css({'width': '100%', 'height': '100%', 'position': 'absolute'});
				tpe = new TPlanEngine({parentElementId: 'building_plan'});
				$.get("http://alfamobile.tapnmap.ru/php/getplan.php?plan_id=3", 
                    function(data){
                        tpe.setUpPlanFromText(data);
                    }
                );
			};
			function switchActualTab(id){
				actualTab = number;
			}
			function onTab1Click(){
				switchActualTab('1');
			}
			function onTab2Click(){
				switchActualTab('2');
				loadMap();
			}
			function onTab3Click(){
				switchActualTab('3');
				loadPlan();
			}
			function showDetailsView(){
				$('#'+actualTab).css({display: 'block'});
			}
		</script>
</html>
